<template>
  <div>
    <div
      class="m-current"
    >
      <van-row>
        <van-col span="6">院长</van-col>
        <van-col span="18">门店</van-col>
      </van-row>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <van-swipe-cell v-for="item in list" :key="item.id" class="m-s-cell-boss">
        <van-row class="m-yy">
          <van-col span="6">{{ item.name }}</van-col>
          <van-col span="18">{{ item.salon }}</van-col>
        </van-row>
        <template #right>
          <van-button
            square
            type="info"
            text="管理"
          />
        </template>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import SwipeCell from 'vant/lib/swipe-cell'
import 'vant/lib/swipe-cell/style'

export default {
  components: {
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [SwipeCell.name]: SwipeCell
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      this.loading = false
      // getShopClerks(this.openId).then(res => {
      //   this.list = res.data.dataXXXXXX
      // })
      this.list = [
        { salon: 'XXXXXX美容院', name: '王院长' },
        { salon: '-------美容院', name: '赵院长' },
        { salon: '=======美容院', name: '杨院长' }
      ]
      this.finished = true
    }
  }
}
</script>

<style lang="scss">
.m-s-cell-boss {
  .van-swipe-cell__left {
    top: -20px;
  }
  .van-swipe-cell__right {
    top: -20px;
  }
}
</style>
<style lang="scss" scoped>
.m-yy {
  background-color: #fff;
    font-size: 26px;
    line-height: 80px;
    text-align: center;
    // box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 3px;

  .m-summary{
    display: flex;
    font-size: 30px;
    // line-height: 80px;
    // margin-bottom: 20px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px 0 50px;
  }
}
.m-current{
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
</style>
